import React,{Component} from 'react'
import Pages from '../Pages'
import User from './User'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch'
import {Spin,message,Button} from 'antd'
import Layer from '../Layer'
import {browserHistory} from 'react-router'
class MyBooks extends Component {
	constructor(props) {
		super(props);
		this.state = {
			BookList:[],
			jumpPage: 1,
			totalPage: 0,
			loading : false,
			bookName:this.props.bookName?this.props.bookName:'',
			bookType:this.props.bookType?this.props.bookType:'',
			selectShoptText:this.props.selectShoptText?this.props.selectShoptText:''
		}
	}
	componentWillUpdate(nextState) {
        if (nextState.bookName !== this.state.bookName) {
            this.setState({
				bookName:nextState.bookName
			},function(){
				this.getMyBooks();
			})
        }
		 if (nextState.bookType !== this.state.bookType) {
            this.setState({
				bookType:nextState.bookType
			},function(){
				this.getMyBooks();
			})
        }
		if (nextState.selectShoptText !== this.state.selectShoptText) {
            this.setState({
				selectShoptText:nextState.selectShoptText
			},function(){
				this.getMyBooks(1);
			})
        }
    }
	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }
	getMyBooks(value){
		if(value===1){
           pub.loading(this,true);
			fetch.bookmyList({pageno:this.state.jumpPage,bookName:this.state.selectShoptText,bookType:this.state.bookType}).then((data) => {
				if(data.result==='RC100'){
					this.setState({
						BookList: data.bookList?data.bookList:[],
						totalPage:data.totalPage?data.totalPage:0
				    });
				}else{
                   message.error(data.errMsg, 3);
				}
				pub.loading(this,false);
			},(res)=>{
				pub.loading(this,false);
				pub.reject(res);
			})
		}else{
           pub.loading(this,true);
			fetch.bookmyList({pageno:this.state.jumpPage,bookName:this.state.bookName,bookType:this.state.bookType}).then((data) => {
				if(data.result==='RC100'){
					this.setState({
					BookList: data.bookList?data.bookList:[],
					totalPage:data.totalPage?data.totalPage:0
				   });
				}else{
                    message.error(data.errMsg, 3);
				}
				pub.loading(this,false);
			},(res)=>{
				pub.loading(this,false);
				pub.reject(res);
			})
		}
	}
    componentWillMount() {
		this.getMyBooks();
	}
	jump(page) {
		this.setState({
			jumpPage:page,
		},function(){
			this.getMyBooks();
		})
	}
	showPDF(pdf) {
		let path = {
			pathname: '/MyPDF',
			state: {
				'pdf': pub.getFile(pdf)
			},
		}
		pub.jumpHistory.push(path);
		// this.props.location.state.pdf
	}
	render(){
		let BookList=this.state.BookList;
		return(
			<div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<ul className="books-list clearFix library">
					{BookList.map((item,index)=>{
						return(
									<li key={index}>
										<img src={pub.getFile(item.bookPath)} alt='book' />
										<div className="book-details">
											<p>书籍名称:  {item.bookName}</p>
											{
												item.subhead!==''?	<p>副标题：{item.subhead}</p>
												:''
											}
											<p>作者:  {item.author}</p>
											{
								       			item.press!==''?<p>出版社: {item.press}</p>
								       			:''
								       		}
								       		
								       		{
								       			item.originalAuthor!==''?<p>原作名: {item.originalAuthor}</p>
								       			:''
								       		}
								       		{
								       			item.translator!==''?<p>译者:  {item.translator}</p>
								       			:''
								       		}
								       		{
								       			item.publishYear!==''?<p>出版年: {item.publishYear}</p>
								       			:''
								       		}
								       		{
								       			Number.isInteger(item.pages)?<p>页数: {item.pages}</p>
								       			:''
								       		}
											<p>兑换积分: {item.cashIntegral}</p>
											<div style={{width:"90px",position:"absolute",bottom:"0"}}>

											{ item.bookEntityPath.indexOf('pdf')!==-1?
											    <a className='show-pdf' onClick={()=>this.showPDF(item.bookEntityPath)}>查看</a>
											    :null}

											{item.operationType === '2' ?<a  href={pub.getFile(item.bookEntityPath)} download={item.bookEntityPath}>下载</a>:null}
                                            </div>
										</div>
									</li>
							)
					})}
				</ul>	
				</Spin>
			  <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
			</div>	
			)
	}
}
class LibraryBooks extends Component {
	constructor(props) {
		super(props);
		this.state = {
			BookList:[],
			jumpPage: 1,
			totalPage: 0,
			loading : false,
			bookName:this.props.bookName?this.props.bookName:'',
			bookType:this.props.bookType?this.props.bookType:'',
			selectShoptText:this.props.selectShoptText?this.props.selectShoptText:'',
			score:'',
			showLayer:false,
		}
	}
	componentWillUpdate(nextState) {
        if (nextState.bookName !== this.state.bookName) {
            this.setState({
				bookName:nextState.bookName
			},function(){
				this.getMyBooks();
			})
        }
		 if (nextState.bookType !== this.state.bookType) {
            this.setState({
				bookType:nextState.bookType
			},function(){
				this.getMyBooks();
			})
        }
		if (nextState.selectShoptText !== this.state.selectShoptText) {
            this.setState({
				selectShoptText:nextState.selectShoptText
			},function(){
				this.getMyBooks(1);
			})
        }
    }
	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }
	getMyBooks(value){
		if(value===1){
			pub.loading(this,true);
			fetch.bookList({pageno:this.state.jumpPage,bookName:this.state.selectShoptText,bookType:this.state.bookType,operationType:1}).then((data) => {
				if(data.result==='RC100'){
					this.setState({
					BookList: data.bookList?data.bookList:[],
					totalPage:data.totalPage?data.totalPage:0,
					score:data.score?data.score:'',
				});
				}else{
					message.error(data.errMsg, 3);
				}
				pub.loading(this,false);
			},(res)=>{
				pub.loading(this,false);
				pub.reject(res);
			})
		}else{
           pub.loading(this,true);
			fetch.bookList({pageno:this.state.jumpPage,bookName:this.state.bookName,bookType:this.state.bookType,operationType:1}).then((data) => {
				if(data.result==='RC100'){
                   this.setState({
					BookList: data.bookList?data.bookList:[],
					totalPage:data.totalPage?data.totalPage:0,
					score:data.score?data.score:'',
				  });
				}else{
					message.error(data.errMsg, 3);
				}
				pub.loading(this,false);
			},(res)=>{
				pub.loading(this,false);
				pub.reject(res);
			})
		}
	}
    componentWillMount() {
		this.getMyBooks();
	}
	jump(page) {
		this.setState({
			jumpPage:page,
		},function(){
			this.getMyBooks();
		})
	}
	showModel(cashIntegral,bookName,bookId,score){
		if(cashIntegral>score){
			this.setState({
               showLayer:false,
			},()=>{
				message.error('很可惜！您的可用积分不足', 3);
			})
		  }else{
              this.setState({
		        cashIntegral,
		        bookName,
		        showLayer:true,
		        bookId,
		        score
	       })
		  }
	}
	hideModel(){
		this.setState({
			showLayer:false
		})
	}
	submitDuihuan(){
		pub.loading(this,true);
        fetch.bookCashbook({bookId:this.state.bookId}).then((data) => {
			pub.loading(this,false);
			message.success(data.errMsg);
			this.setState({
				showLayer:false
			},()=>{
				this.getMyBooks();
			})
		},(res)=>{
			pub.loading(this,false);
			this.setState({
				showLayer:false
			})
			pub.reject(res);
		})
	}
	render(){
		let BookList=this.state.BookList;
		return(
			<div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<ul className="books-list clearFix library">
					{BookList.map((item,index)=>{
						return(
									<li key={index}>
										<img src={pub.getFile(item.bookPath)} alt='book' onError={(e) => pub.headImageError(e)}/>
										<div className="book-details">
											<p>书籍名称:  {item.bookName}</p>
											{
												item.subhead!==''?	<p>副标题：{item.subhead}</p>
												:''
											}
											<p>作者:  {item.author}</p>
											{
								       			item.press!==''?<p>出版社: {item.press}</p>
								       			:''
								       		}
								       		
								       		{
								       			item.originalAuthor!==''?<p>原作名: {item.originalAuthor}</p>
								       			:''
								       		}
								       		{
								       			item.translator!==''?<p>译者:  {item.translator}</p>
								       			:''
								       		}
								       		{
								       			item.publishYear!==''?<p>出版年: {item.publishYear}</p>
								       			:''
								       		}
								       		{
								       			Number.isInteger(item.pages)?<p>页数: {item.pages}</p>
								       			:''
								       		}
											<p>兑换积分: {item.cashIntegral}</p>
											{
												item.userBookIsBuy.isBuy===1?
												<a style={{background:'#e9e9e9'}}>已兑换</a>:
												<a  onClick={()=>this.showModel(item.cashIntegral,item.bookName,item.bookId,this.state.score)}>兑换</a>
											}
										</div>
									</li>
							)
					})}

				</ul>	
				</Spin>
						<Layer 
							title = "确认兑换"
							show={this.state.showLayer} 
							hide={this.hideModel.bind(this)}
							width="400px"
							height="270px"
						>
								<div className="row">
										<div className="pop-box-1">											
											<p>商品名称：{this.state.bookName}</p>											
											<p>兑换积分：{this.state.cashIntegral}</p>											
											<p>可用积分：{this.state.score}</p>										
										</div>
										<div className="pop-btn">
											<Button loading={this.state.loading} onClick={()=>this.hideModel()} className="btn btn-blue">取消</Button>
											<Button loading={this.state.loading} className="btn btn-blue" onClick={()=>this.submitDuihuan()}>确认</Button>
										</div>
									</div>
						</Layer>
				 <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
			</div>	
			)
	}
}
class Database extends Component {
	constructor(props) {
		super(props);
		this.state = {
			BookList:[],
			jumpPage: 1,
			totalPage: 0,
			loading : false,
			bookName:this.props.bookName?this.props.bookName:'',
			bookType:this.props.bookType?this.props.bookType:'',
			selectShoptText:this.props.selectShoptText?this.props.selectShoptText:''
		}
	}
	componentWillUpdate(nextState) {
        if (nextState.bookName !== this.state.bookName) {
            this.setState({
				bookName:nextState.bookName
			},function(){
				this.getMyBooks();
			})
        }
		 if (nextState.bookType !== this.state.bookType) {
            this.setState({
				bookType:nextState.bookType
			},function(){
				this.getMyBooks();
			})
        }
		if (nextState.selectShoptText !== this.state.selectShoptText) {
            this.setState({
				selectShoptText:nextState.selectShoptText
			},function(){
				this.getMyBooks(1);
			})
        }
    }
	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }
	getMyBooks(value){
		if(value===1){
			pub.loading(this,true);
			fetch.bookList({pageno:this.state.jumpPage,bookName:this.state.selectShoptText,bookType:this.state.bookType,operationType:2}).then((data) => {
				if(data.result==='RC100'){
				this.setState({
					BookList: data.bookList?data.bookList:[],
					totalPage:data.totalPage?data.totalPage:0
				});
				}else{
					 message.error(data.errMsg, 3);
				}
				pub.loading(this,false);
			},(res)=>{
				pub.loading(this,false);
				pub.reject(res);
			})
		}else{
                pub.loading(this,true);
				fetch.bookList({pageno:this.state.jumpPage,bookName:this.state.bookName,bookType:this.state.bookType,operationType:2}).then((data) => {
					this.setState({
						BookList: data.bookList?data.bookList:[],
						totalPage:data.totalPage?data.totalPage:0
					});
					pub.loading(this,false);
				},(res)=>{
					pub.loading(this,false);
					pub.reject(res);
				})
		}
	}
    componentWillMount() {
		this.getMyBooks();
	}
	jump(page) {
		this.setState({
			jumpPage:page,
		},function(){
			this.getMyBooks();
		})
	}
	render(){
		let BookList=this.state.BookList;
		return(
			<div>
				<Spin spinning={this.state.loading} tip="加载列表中...">
				<ul className="books-list clearFix library">
					{BookList.map((item,index)=>{
						return(
									<li key={index}>
										<img src={pub.getFile(item.bookPath)} alt='book' />
										<div className="book-details">
											<p>书籍名称:  {item.bookName}</p>
											{
												item.subhead!==''?	<p>副标题：{item.subhead}</p>
												:''
											}
											<p>作者:  {item.author}</p>
											{
								       			item.press!==''?<p>出版社: {item.press}</p>
								       			:''
								       		}
								       		
								       		{
								       			item.originalAuthor!==''?<p>原作名: {item.originalAuthor}</p>
								       			:''
								       		}
								       		{
								       			item.translator!==''?<p>译者:  {item.translator}</p>
								       			:''
								       		}
								       		{
								       			item.publishYear!==''?<p>出版年: {item.publishYear}</p>
								       			:''
								       		}
								       		{
								       			Number.isInteger(item.pages)?<p>页数: {item.pages}</p>
								       			:''
								       		}
											<p>兑换积分: {item.cashIntegral}</p>
											<a href={pub.getFile(item.bookEntityPath)} download={item.bookEntityPath}>下载</a>
										</div>
									</li>
							)
					})}
				</ul>	
				</Spin>
			  <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
			</div>	
			)
	}
}
class Library extends Component {
	constructor(props) {
		super(props);
		this.state = {
			activeIndex : 1,
            bookType:'',
			bookTypes:[],
			poinShoptText:'',
			selectShoptText:''
		}
	}
	componentWillMount() {
		fetch.prepareinsertBook({pid:1}).then((data) => {
			this.setState({
				bookTypes: data.categoriesList?data.categoriesList:[],
			});
		},(res)=>{
			pub.reject(res);
		})
	}
	handleChange(event){
		this.setState({
			bookType:event.target.value
		})
	}
	submitText(){
		this.setState({selectShoptText: this.state.poinShoptText});
	}
	pSTextChange(event){
		this.setState({poinShoptText: event.target.value});
	}
	render(){
		return(
			<div>
				<div className="left-layout">
					<div className="filter clearFix">
						<ul className="filter-ul nav clearFix">
							<li><a className={this.state.activeIndex===1?"active":""} onClick={()=>{this.setState({activeIndex:1})}}>我的书架</a></li>
							<li><a className={this.state.activeIndex===2?"active":""} onClick={()=>{this.setState({activeIndex:2})}}>图书馆</a></li>
							<li><a className={this.state.activeIndex===3?"active":""} onClick={()=>{this.setState({activeIndex:3})}}>资料库</a></li>
						</ul>
						<div className="filter-search floatR">
							<input type="text" placeholder="搜索" value={this.state.poinShoptText} onChange={this.pSTextChange.bind(this)}/>
							<a className="btn search-btn" onClick={this.submitText.bind(this)}><i className="icon-search"></i></a>
						</div>
						<div className="filter-select floatR">
							<select onChange={this.handleChange.bind(this)} value={this.state.bookType}>
								<option key={0} value={''}>全部</option>
								{
									this.state.bookTypes.map((item,index)=>{
										return(
                                           <option key={index} value={item.code}>{item.name}</option>
										)
									})
								}								
							</select>
						</div>
					</div>
					<div className="row tab">
					{this.state.activeIndex===1?
                        <MyBooks bookName={this.state.poinShoptText}  bookType={this.state.bookType} selectShoptText={this.state.selectShoptText}/>:this.state.activeIndex===2?
                        <LibraryBooks bookName={this.state.poinShoptText}  bookType={this.state.bookType} selectShoptText={this.state.selectShoptText}/>:<Database bookName={this.state.poinShoptText}  bookType={this.state.bookType} selectShoptText={this.state.selectShoptText}/>
					}
					</div>
					<div className="line"></div>
					<Pages />
				</div>
				<div className="right-layout-top">
				   <User />
				</div>
			</div>
			)
	}
}
export default Library;